<template>
    <div @click="showList">
        <div v-if="!table.row">
            <slot >
                <el-button link type="primary">请选择地址</el-button>
            </slot>
        </div>

        <div v-else class="d_flex flex_ai_c flex_jc_sb">
            <div class="mr10">
                <div>{{table.row.contact}} {{table.row.mobile}}</div>
                <div>{{table.row.area_title}} {{table.row.address}}</div>
            </div>
            <div>
                <el-button link type="primary">
                    切换 <i class="fa-solid fa-angle-right"></i>
                </el-button>
            </div>
        </div>
    </div>


    <mi-dialog v-model="dialogShow" title="选择地址">

        <el-table class="mb10"
                  :data="table.data"
                  style="width: 100%"
                  max-height="50vh"
                  highlight-current-row
                  @current-change="tableCurrentChange"
        >

<!--            <el-table-column type="selection" width="55"  v-if="" />-->
            <el-table-column prop="contact" label="联系人" />
            <el-table-column prop="mobile" label="联系电话" />
            <el-table-column prop="address" label="地址">
                <template #default="{row}">
                    {{row.area_title}} {{row.address}}
                </template>
            </el-table-column>
        </el-table>

<!--        <el-pagination-->
<!--            background-->
<!--            layout="prev, pager, next"-->
<!--            v-model:page-size="table.limit"-->
<!--            v-model:current-page="table.page"-->
<!--            :total="table.total" />-->

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="confirm">确认</el-button>
                <el-button @click="dialogShow = false">取消</el-button>
            </div>
        </template>

    </mi-dialog>

</template>

<script setup lang="ts">
import {computed, onMounted, reactive, Ref, ref, watch} from "vue";
import global from "@/dict/global";
import {simpleGet} from "@/utils/request";

const tdWidth = global.tdWidth

const props = withDefaults(defineProps<{
    modelValue?: number,
    disabled?:boolean,
}>(), {
    disabled:false,
})
const emits = defineEmits(['update:modelValue', 'change'])
const value_c = computed({
    get:(): any => {
        return props.modelValue
    },
    set:(val:number) => {
        emits("update:modelValue", val)
    }
})
const dialogShow = ref(false)
const page = ref(1)
const table  : Record<string, any> = reactive({
    where:{},
    data:[],
    page:1,
    limit:10,
    total:0,
    loading:true,
    row:null,   // 选中的行
})


const showList = () => {
    dialogShow.value = true
    // 查询地址列表
    searchRequest()
}

const searchRequest = () => {
    simpleGet("/site.siteAddress/list",{}).then((res:any) => {
        table.data = res.list
    })
}

const tableCurrentChange = (row:any) => {
    table.row = row
}

const confirm = () => {
    const row : any = table.row
    emits('change', {
        row,
        value:row.id,
    })
    // 修改值
    value_c.value = parseInt(row.id)
    // 关闭
    dialogShow.value = false
}


onMounted(() => {
    if (props.modelValue){
        // 设置默认值
        const id = props.modelValue
        simpleGet("/site.siteAddress/edit",{id}).then((res:any) => {
            table.row = res.info
        })
    }

})

</script>

<style scoped>


</style>
